import React from 'react';
import { Card, Input, Select, Button, Typography, Space } from 'antd';
import { CloseOutlined } from '@ant-design/icons';

const { Option } = Select;
const { Title } = Typography;

interface NodeEditorProps {
  nodes: any[];
  selectedNodeId: string | null;
  tools: any[];
  onClose: () => void;
  setNodes: (update: (nodes: any[]) => any[]) => void;
}

export default function NodeEditor({ nodes, selectedNodeId, tools, onClose, setNodes }: NodeEditorProps) {
  const currentNode = nodes.find(n => n.id === selectedNodeId);

  if (!currentNode) return null;

  return (
    <div className="node-editor">
      <Card
        title={
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <Title level={5} style={{ margin: 0 }}>节点配置</Title>
            <Button 
              type="text" 
              icon={<CloseOutlined />} 
              onClick={onClose}
              size="small"
            />
          </div>
        }
        bordered={false}
        style={{ width: 300, position: 'absolute', right: 20, top: 20, zIndex: 1000 }}
      >
        <Space direction="vertical" style={{ width: '100%' }}>
          <div>
            <Typography.Text strong>节点名称</Typography.Text>
            <Input
              value={currentNode.data.label || ''}
              onChange={(e) => {
                setNodes(prev => prev.map(node => 
                  node.id === selectedNodeId
                    ? { ...node, data: { ...node.data, label: e.target.value } }
                    : node
                ));
              }}
              placeholder="输入节点名称"
            />
          </div>
          
          <div>
            <Typography.Text strong>绑定脚本</Typography.Text>
            <Select
              value={currentNode.data.scriptId || ''}
              onChange={(value) => {
                setNodes(prev => prev.map(node => 
                  node.id === selectedNodeId
                    ? { ...node, data: { ...node.data, scriptId: value } }
                    : node
                ));
              }}
              placeholder="请选择脚本"
              style={{ width: '100%' }}
            >
              <Option value="">请选择脚本</Option>
              {tools.map(tool => (
                <Option key={tool.id} value={tool.id}>
                  {tool.name}
                </Option>
              ))}
            </Select>
          </div>
        </Space>
      </Card>
    </div>
  );
} 